<template>
    <div class="Tabs">
        <el-link v-if="operateFlag" @click="operateClick()" class="operate" type="text">收起<i class="el-icon-arrow-down el-icon--right"></i></el-link>
        <el-link v-else class="operate"  @click="operateClick()" type="text">展开<i class="el-icon-arrow-up el-icon--right"></i></el-link>

        <el-tabs type="border-card">
            <el-tab-pane :class="{'hid': !operateFlag}" label="操作动态">
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :type="index == 0 ? 'primary' : null"
                        :color="activity.color"
                        :size="activity.size"
                    >
                        {{activity.content}}
                        <ul class="tag">
                            <li>
                                <span>预审人：</span>
                                <i>{{activity.actionPerson}}</i>
                            </li>
                            <li>
                                <span>预审结果：</span>
                                <el-link type="success" v-if="activity.actionType == 3 || activity.actionType == 4">{{typeFilter(activity.actionType)}}</el-link>
                                <el-link type="error" v-if="activity.actionType == -3 || activity.actionType == -4">{{typeFilter(activity.actionType)}}</el-link>
                                <el-link type="text">{{typeFilter(activity.actionType)}}</el-link>
                            </li>
                            <li>
                                <i style="color: #999999;margin-left: 15px">{{activity.createTime}}</i>
                            </li>
                        </ul>
                        <el-row class="tag">
                            <el-col :span="24">
                                <li>
                                    <span>预审意见：</span>
                                    <i>{{activity.actionOpinion}}</i>
                                </li>
                            </el-col>
                        </el-row>
                        <!-- <ul class="fileList">
                            <li class="fileItem">
                                <i class="el-icon-paperclip"></i>
                                <p>长沙市2020年交通局专项发展规划.pdf</p>
                                <i class="el-icon-download"></i>
                            </li>
                        </ul> -->
                    </el-timeline-item>
                </el-timeline>
            </el-tab-pane>
            <el-tab-pane :class="{'hid': !operateFlag}" label="流程图">
                <img :src="workflow" width="100%" />
            </el-tab-pane>
            <el-tab-pane :class="{'hid': !operateFlag}" label="工单处理">
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :type="activity.type"
                        :color="activity.color"
                        :size="activity.size"
                    >
                        {{activity.content}}
                        <ul class="tag">
                            <li>
                                <span>预审人：</span>
                                <i>{{activity.name}}</i>
                            </li>
                            <li>
                                <span>预审结果：</span>
                                <el-link type="text">通过</el-link>
                            </li>
                            <li>
                                <i style="color: #999999;margin-left: 15px">{{activity.timestamp}}</i>
                            </li>
                        </ul>
                        <el-row class="tag">
                            <el-col :span="24">
                                <li>
                                    <span>预审意见：</span>
                                    <i>{{activity.advice}}</i>
                                </li>
                            </el-col>
                        </el-row>
                        <!-- <ul class="fileList">
                            <li class="fileItem">
                                <i class="el-icon-paperclip"></i>
                                <p>长沙市2020年交通局专项发展规划.pdf</p>
                                <i class="el-icon-download"></i>
                            </li>
                        </ul> -->
                    </el-timeline-item>
                </el-timeline>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
/* eslint-disable */

export default {
    data() {
        return {
            creator: {},
            workflow: null,
            activities: [],
            operateFlag: true
        };
    },
    computed: {
        id() {
            return this.$route.query.id;
        },
        pid() {
            return this.$route.query.pid;
        }
    },
    mounted() {
        this.getList()
        if (this.pid) {
            this.getWorkflow();
        }
    },
    methods: {
        getWorkflow() {
            this.axios
                .get("/workflow/findImageInputStreamByProcessInstanceId", {
                    params: {
                        processInstanceId: this.pid
                    }
                })
                .then(res => {
                    if (res.code !== 1000) {
                        this.$message.error(res.message);
                    }
                    this.workflow = res.data;
                });
        },
        getList() {
            this.axios
                .get("/projectTrial/getList/log", { params: { trialId: this.id } })
                .then(res => {
                    this.activities = res.data;
                });
        },
        typeFilter(val) {
            switch (val) {
                case 1:
                return '新增'
                case 2:
                return '修改'
                case 3: 
                return '审定通过'
                case 4:
                return '批准通过'
                case 5:
                return '删除'
                case -3:
                return '批准不通过'
                case -4:
                return '审定不通过'
            }
        },
        operateClick() {
            this.operateFlag = !this.operateFlag
        }
    }
};
</script>

<style lang="less" scoped>
.Tabs {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    position: relative;
    .tag {
        display: flex;
        color: #999;
        margin-top: 10px;
        i {
            font-style: initial;
            color: #333;
        }
        li {
            margin-right: 15px;
            display: flex;
            align-items: center;
        }
        .el-button--small {
            padding: 0;
        }
    }
    .fileList {
        display: inline-block;
        .fileItem {
            margin-top: 8px;
            display: flex;
            align-items: center;
            border-radius: 2px;
            background-color: #FCFCFC;
            border:1px solid rgba(244,244,244,1);
            padding: 8px 12px;
            p {
                margin: 0 10px 0 5px;
                color: #333;
            }
        }
    }
}
.operate {
    position: absolute;
    right: 30px;
    top: 30px;
    z-index: 999;
}
.hid {
    display: none;
}
</style>